<template>
	<view class="container" :style="{height:height}">
		<view class="nav" :style="{height:nav_h}">
			<view class="navigation">
				<image src="../../static/images/back.png" v-on:click="reback"></image>
				<view>
					体质测试
				</view>
			</view>
		</view>
		<view class="remark">请根据最近三个月的体验和感觉回答（如果您是第一次辨识，请根据近一年的情况进行回答）</view>
		<view class="title">{{result.question}}</view>
		<view class="answer">
			<radio-group @change="radio_selected">
				<view class="answer_unit" v-for="(item,index) in result.option" :key="index">
					<radio :value="item[0]" color="#24C3A4" checked="true" v-if="item[2]==1">{{item[1]}}</radio>
					<radio :value="item[0]" color="#24C3A4" v-else>{{item[1]}}</radio>
				</view>
			</radio-group>
		</view>
		<view class="operate">
			<view class="before" id="0" v-on:click="operate">上一题</view>
			<view class="next" id="1" v-on:click="operate">下一题</view>
		</view>
	</view>
</template>
<style>
	.nav{width:100%;padding-bottom: 20upx;display: flex;justify-content: flex-start;
	      align-items: flex-end;}
	.navigation{width:95%;padding-left:5%;height: 50upx;font-size: 28upx;color: #333;text-align: center;display: flex;justify-content: flex-start;align-items: center;}
	.navigation image{width:40upx;height: 40upx;padding:5upx 30upx;border-radius: 25upx;background: #F1F1F1;}
	.navigation view{font-size: 28upx;color: #333;text-align: center;margin-left:30%;}
	.nav_lh{width:100%;}
	
	.container{width: 100%;background-size: 100% auto;background-repeat: no-repeat;
				background-image: url("https://zhangjie.jdmuguzhid.com/static/images/yztang/test_bg.jpg");}
	.remark{width:70%;padding:100upx 15%;line-height: 60upx;font-size: 28upx;color: #333333;/* margin-top:150upx ; */}
	.title{width:70%;margin:20upx 15%;line-height: 60upx;font-size: 32upx;color: #333333;font-weight: bold;}
	.answer{width:70%;margin:20upx 15%;line-height: 60upx;font-size: 32upx;color: #333333;}
	.answer_unit{line-height: 70upx;}
	.operate{width:70%;margin:20upx 15%;height: 100upx;display: flex;justify-content: space-between;align-items: center;position: fixed;bottom: 40upx;}
	.before{border:1px solid #3DE9C7;color: #3DE9C7;font-size: 32upx;width:48%;height: 100upx;border-radius: 50upx;text-align: center;line-height: 100upx;}
	.next{background: #3DE9C7;color: #FFFFFF;font-size: 32upx;width:48%;height: 100upx;border-radius: 50upx;text-align: center;line-height: 100upx;}
</style>
<script>
	export default {
		data() {
			return {
				grade:'0',
				number:0,
				result:[],
				height:'',
				statusBar:'',
				nav_h:'',
				nav_lh:'',
				url: getApp().globalData.url,
				static:getApp().globalData.static
			}
		},
		onLoad(e) {
			var res = uni.getSystemInfoSync();
			this.height = res.screenHeight+"px";
			this.nav_h  = res.statusBarHeight +35+ "px";
			this.nav_lh = res.statusBarHeight +45+ "px";
			this.statusBar = res.statusBarHeight+"px";
			this.number = parseInt(e.number);
		},
		onShow(){
			this.initialize();
		},
		methods: {
			reback:function()
			{
				uni.navigateBack();
			},
			initialize:function()
			{
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				uni.request({
					url: this.url+"/wechat_problem",
					data: {number:this.number},
					header: {'Content-Type': 'application/json'},
					success: function (res) 
					{
						if(res.data.status==1)
						{
							for(var i=0;i<res.data.result.option.length;i++)
							{
								res.data.result.option[i][2] = 0;
							}
							that.result = res.data.result;
							console.log(that.result);
						}
					}
				})
			},
			radio_selected:function(e)
			{
				this.grade = e.detail.value;
			},
			button_start:function()
			{
				uni.navigateTo({
					url:"question?number=0"
				})
			},
			operate:function(e)
			{
				var number = uni.getStorageSync("number");
				console.log(number);
				if(this.number==60)
				{
					uni.navigateTo({url:"answer"})
				}
				else
				{
					if(number=="")
					{
						var tmp  = {};
						tmp.number = this.number;
						if(this.grade=="0")
						{
							tmp.answer = '0';
						}
						else
						{
							tmp.answer = this.grade;
						}
						var arr = [];
						arr.push(tmp);
						uni.setStorageSync("number",arr);
					}
					else
					{
						var status = 1;
						for(var i=0;i<number.length;i++)
						{
							if(this.number==number[i].number)
							{
								number[i].answer = this.grade;
								status = 0;
							}
						}
						if(status==1)
						{
							var tmp  = {};
							tmp.number = this.number;
							if(this.grade=="0")
							{
								tmp.answer = '0';
							}
							else
							{
								tmp.answer = this.grade;
							}
							number.push(tmp);
							uni.setStorageSync("number",number);
						}
						else
						{
							uni.setStorageSync("number",number);
						}
					}
					for(var i=0;i<this.result.option.length;i++)
					{
						this.result.option[i][2] = 0;
					}
					var type = e.currentTarget.id;
					if(type=="0")
					{
						this.number --;
						this.initialize();
					}
					else
					{
						this.number++;
						this.initialize();
					}
				}
			}
		}
	}
</script>